<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
	<div class="goods" id="goods" name="goods">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->

		<!-- 分类标签 -->
		<div class="nav">
			<div class="goods-nav">
				<div class="title">分类</div>
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane v-for="item in goodsTypeList" :key="item.id" :label="item.name" :name="''+item.id"  @click="goodsTypeID(item.id)" />
				</el-tabs>
			</div>
		</div>
		<!-- 分类标签END -->

		<!-- 主要内容区 -->
		<div class="main">
			<div class="list">
				<MyList :list="goods" v-if="goods"></MyList>
				<div v-else class="none-goods">抱歉没有找到相关的商品，请看看其他的商品</div>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange"></el-pagination>
			</div>
			<!-- 分页END -->
		</div>
		<!-- 主要内容区END -->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				goodsTypeList: [], //分类列表
				goodsTypeID: [], // 分类id
				goods: null, // 商品列表
				goodsList: [],
				total: 0, // 商品总量
				pageSize: 15, // 每页显示的商品数量
				currentPage: 1, //当前页码
				activeName: "-1", // 分类列表当前选中的id
				search: "" ,// 搜索条件
				typeId:""
			};
		},
		created() {
			// 获取分类列表
			this.getgoodsType();
		},
		activated() {
			this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
			this.total = 0; // 初始化商品总量为0
			this.currentPage = 1; //初始化当前页码为1
			// 如果路由没有传递参数，默认为显示全部商品
			if (Object.keys(this.$route.query).length === 0) {
				this.goodsTypeID = [];
				this.activeName = "0";
				return;
			}
			// 如果路由传递了goodsTypeID，则显示对应的分类商品
			if (this.$route.query.goodsTypeID !== undefined) {
				this.goodsTypeID = this.$route.query.goodsTypeID;
				if (this.goodsTypeID.length === 1) {
					this.activeName = "" + this.goodsTypeID[0];
				}
				return;
			}
			// 如果路由传递了search，则为搜索，显示对应的分类商品
			if (this.$route.query.search !== undefined) {
				this.search = this.$route.query.search;
			}
		},
		watch: {
			// 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
			activeName: function(val) {
				if (val === 0) {
					this.goodsTypeID = [];
					console.log(this.goodsTypeID)
				}
				if (val > 0) {
					this.goodsTypeID = [Number(val)];
					// console.log(this.goodsTypeID)
				}
				// 初始化商品总量和当前页码
				this.total = 0;
				this.currentPage = 1;
				// 更新地址栏链接，方便刷新页面可以回到原来的页面
				this.$router.push({
					path: "/goods",
					query: {
						goodsTypeID: this.goodsTypeID
					}
				});
			},
			// 监听搜索条件，响应相应的商品
			search: function(val) {
				if (val !== "") {
					this.getGoodsBySearch(val);
				}
			},
			// 监听分类id，响应相应的商品
			goodsTypeID: function(id) {
				this.typeId=id;
				this.getData();
				this.search = "";
			},
			// 监听路由变化，更新路由传递了搜索条件
			$route: function(val) {
				if (val.path === "/goods") {
					if (val.query.search !== undefined) {
						this.activeName = "-1";
						this.currentPage = 1;
						this.total = 0;
						this.search = val.query.search;
					}
				}
			}
		},
		methods: {
			// 返回顶部
			backtop() {
				const timer = setInterval(function() {
					const top = document.documentElement.scrollTop || document.body.scrollTop;
					const speed = Math.floor(-top / 5);
					document.documentElement.scrollTop = document.body.scrollTop =
						top + speed;

					if (top === 0) {
						clearInterval(timer);
					}
				}, 20);
			},
			// 页码变化调用currentChange方法
			currentChange(currentPage) {
				this.currentPage = currentPage;
				if (this.search != "") {
					this.getGoodsBySearch();
				} else {
					this.getData();
				}
				this.backtop();
			},
			// 向后端请求分类列表数据
			getgoodsType() {
				this.$axios
					.post("/goodsType/queryAll", {})
					.then(res => {
						const val = {
							id: 0,
							name: "全部"
						};
						const cate = res.data.data;
						cate.unshift(val);
						this.goodsTypeList = cate;
						console.log(res)
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求全部商品或分类商品数据
			getData() {
				// console.log(this.goodsTypeID[0]+"aaaa")
				// 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
				const api =
					this.goodsTypeID.length === 0 ?
					"/goods/selectInfo" :
					"/goods/selectByType";
				this.$axios
					.post(api, {
						id: this.goodsTypeID[0],
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						this.goods = res.data.data;
						// this.goodsTypeID=res.data.data.typeId;
						this.sold = res.data.data.sold;
						console.log(res);
						// console.log(res.data.data.data.sold)

					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 通过搜索条件向后端请求商品数据
			getGoodsBySearch() {
				this.$axios
					.post("/goods/getGoodsBySearch", {
						search: this.search,
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						this.goods = res.data.Goods;
						this.total
						// = res.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
		}
	};
</script>

<style scoped>
	.goods {
		background-color: #f5f5f5;
	}

	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}

	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}

	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}

	/* 面包屑CSS END */

	/* 分类标签CSS */
	.goods .nav {
		background-color: white;
	}

	.goods .nav .goods-nav {
		width: 1225px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
	}

	.nav .goods-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}

	/* 分类标签CSS END */

	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}

	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}

	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}

	.goods .main .none-goods {
		color: #333;
		margin-left: 13.7px;
	}

	/* 主要内容区CSS END */
</style>
